import React, { Component } from "react";
import { nanoid } from "nanoid";
import "./index.css";
export default class Header extends Component {
  handleAddTodo = (event) => {
    const { target, keyCode } = event;
    const { addTodo } = this.props;
    if (keyCode !== 13) return;
    if (target.value.trim() === "") return alert("不能为空");
    const newTodo = { id: nanoid(), description: target.value.trim(), done: false };
    addTodo(newTodo);
    target.value = "";
  };
  render() {
    return (
      <div className="todo-header">
        <input onKeyUp={this.handleAddTodo} type="text" placeholder="请输入你的任务名称，按回车键确认" />
      </div>
    );
  }
}
